import 'braft-editor/dist/index.css'
import React , {useState} from 'react'
import BraftEditor from 'braft-editor'
import { Input ,Space , Button } from 'antd'

const Com = () => {
  const [proName , setProName] = useState('')
  const [detail , setDetail] = useState('')
  const getData = (editorState) => {
    setDetail(editorState.toHTML())
  }
  const add = () => {
    console.log(proName , 111 , detail , 222);
  }
  return (
    <div>
      <h1>富文本编辑器</h1>
      <Space style={{width:'100%'}} direction="vertical" >
        <Input 
          value={ proName } 
          onChange={ (e) => setProName(e.target.value)}  
          placeholder='产品名称'
        >
        </Input>
        <BraftEditor
          value={detail}
          onChange={getData}
        />
      </Space>
      <Button onClick={ add } >添加</Button>
      <h2>预览</h2>
      <div dangerouslySetInnerHTML={{__html:detail}}>

      </div>
    </div>
  )
}
export default Com